<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.org/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1">
    <title>layui布局</title>
    <!--第一步，引入layui的资源-->
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}">
</head>
<body>
<!--在body下引入js资源-->
<script th:src="@{/resources/layui/layui.js}"></script>

<!--开始写，layui的资源-->
<script th:inline="none">//此处有坑，需要设置“th:inline="none"”
//一般直接写在一个js文件中
//同时，在layui中引入table表格
layui.use(['layer', 'form', 'table'], function () {
    var layer = layui.layer
        , form = layui.form
        , table = layui.table
        , $ = layui.jquery;//引入jquery
    //使用表格
    var userTable = table.render({
        id: 'userListTable',//便于引用
        elem: '#userTable',//选中列表的id
        height: 312,//高度
        url: '/troublerecord/troublerecordList',//数据接口
        page: true,//开启分页
        limits: [5, 10, 15, 20],
        limit: 2,
        cols:[[
            {field:'id',title:'编号',width:80,type:'checkbox'},
            {field: 'vehiclefile',title:'车辆',templet:function (obj) {
                return obj.vehiclefile.vehiclenum;
            }},
            {field: 'driver',title:'司机',templet:function (obj) {
                return obj.driver.name;
            }},


            {field: 'address', title: '地点'},
            {field: 'time', title: '时间'},
            {field: 'explain', title: '事故原因'},
            {field: 'ourmoney', title: '我方承担金额'},

            {field: 'othermoney', title: '对方承担金额'},
            {field: 'insuremoney', title: '保险承担金额'},
            {field: 'information', title: '备注'},
            {title: '操作', width: 250, templet: '#usersListBar', fixed: "right", align: "center"}

        ]]

    });
    //单击表格中的操作选项
    table.on("tool(usersList)", function (obj) {
        //获取当前行的数据              
        var data = obj.data;
        switch (obj.event) {
            case 'edit':
                var index = layer.open({
                    type: 2,
                    title: '更新数据',
                    content: '/gouptrouble',
                    area: ['500px', '300px'],
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        //少了 这个是不能从父页面向子页面传值的
                        body.find("#troubleId").val(data.id);
//这样就将值传递 给子页面中id为userIdHiden的隐藏域
                    },
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var res = window["layui-layer-iframe" + index].callbackdata();
                        var formdata = decodeURIComponent(res,true);
                        $.ajax({
                            url: '/troublerecord/updateroublerecord',
                            data: formdata,
                            traditional: true,
                            success: function (res) {
                                if (res.code == 515 ) {
                                    layer.msg(res.message);
                                    layui.layer.close(index);
//                                    window.location.href="/login/indexNavMenu";
                                }
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        console.log("关闭");
                        layui.layer.close(index);
                    }
                });
                break;
        }
    });
    //搜索功能
    $(".searchBtn").click(function () {
        var vehiclenum = $("#vehiclenum").val();
        layer.msg(vehiclenum);
        var driverid = $("#driverid").val();
//        var deptid = $("#deptid").val();
        //注意引入jquery,通过url传值，相当于get传值
        //reload刷新--调用table表格中的，
        //dept.id想想对应的关系
        table.reload('userListTable', {url: '/yearcheckrecord/yearcheckrecordList?vid=' + vehiclenum+"&driverid="+driverid})
    });
    //下拉菜单填充动态数据
    $.ajax({
        type: "GET",
        url: "/vehiclefiles/selectVehicleAll",
        success: function (res) {
            var vehiclefiles = res.data.vehiclefilesList;
            if (vehiclefiles.length > 0) {
                for (var i = 0; i < vehiclefiles.length; i++) {
                    var vehiclefile = vehiclefiles[i];
                    //追加，注意有坑，需要渲染下拉菜单
                    $("#vehiclenum").append("<option value='" + vehiclefile.id + "'>" + vehiclefile.vehiclenum + "</option>")
                }
            }
            //渲染下拉菜单
            layui.form.render("select");
        }
    })
    //下拉菜单填充动态数据
    $.ajax({
        type: "GET",
        url: "/driver/selectAllDriver",
        success: function (res) {
            var drivers = res.data.drivers;
            if (drivers.length > 0) {
                for (var i = 0; i < drivers.length; i++) {
                    var driver = drivers[i];
                    //追加，注意有坑，需要渲染下拉菜单
                    $("#driverid").append("<option value='" + driver.id + "'>" + driver.name + "</option>")
                }
            }
            //渲染下拉菜单
            layui.form.render("select");
        }
    })

    //增加记录
    $("#addPathBtn").click(function () {
        //获取当前行的数据              


        var index = layer.open({
            type: 2,
            title: '增加记录',
            content: '/goaddtrouble',
            area: ['500px', '300px'],


        })
    });
    //批量删除
    $("#removePatchBtn").click(function () {
        //获取所选中的复选框的集合r
        var checkStatus = table.checkStatus('userListTable');
        var data = checkStatus.data;
        var ids = new Array();
        if (data.length == 0) {
            layer.msg("请至少选择一条信息");
        } else {
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id)
            }
            //向服务端发送ajax请求
            layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {

                $.ajax({
                    type: 'get',
                    url: '/troublerecord/removeroublerecord',
                    data: {ids: ids},
                    //必须加上，可以用js对象传值
                    traditional: true,
                    success: function (res) {
                        if (res.code == 513) {
                            layer.close(index)
                            //刷新表格
                            userTable.reload();
                        } else if (res.code == 201 || res.code == 514) {
                            layer.msg(res.message);
                        }

                    }
                });
            });

        }
    });

});
</script>


<!--最外层是面包屑-->
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" action="">

        <div class="layui-inline">
            <input type="text" class="layui-input" id="vehiclefilenum" placeholder="请输入车牌号">
        </div>
        <div class="layui-inline">
            <!--下拉菜单，车牌号-->
            <select id="vehiclenum" name="">
                <option value="0">请选择车牌号</option>
            </select>
        </div>
        <div class="layui-inline">
            <!--下拉菜单，车牌号-->
            <select id="driverid" name="">
                <option value="0">请选择驾驶员</option>
            </select>
        </div>


        <div class="layui-inline">
            <button type="button" class="layui-btn searchBtn">
                搜索
            </button>
        </div>
        <shiro:hasPermission name="user:deletePath">
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="removePatchBtn">
                    批量删除
                </button>
            </div>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:addPath">
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="addPathBtn">
                    增加记录
                </button>
            </div>
        </shiro:hasPermission>
    </form>

</blockquote>
<table id="userTable" lay-filter="usersList"></table>
<!--操作-->
<script id="usersListBar" type="text/html">
     
    <shiro:hasPermission name="user:edit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </shiro:hasPermission>
     
    <shiro:hasPermission name="user:delete">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </shiro:hasPermission>

</script>

</body>
</html>